<template>
  <div class="stat_previre-form">
    <ControlCard class="previre-form" :controlCardColumns="props.controlCardColumns" :cover-image="props.coverImage" :read-only="readOnly" />
  </div>
</template>
<script lang="tsx" setup>
  import { defineProps, provide, reactive, ref, computed ,defineExpose } from 'vue'
  import ControlCard from './ControlCard'

  const props = defineProps(['controlCardColumns', 'coverImage', 'readOnly'])

const formDataModel = computed(() => {
    const data = {}
    for (const iterator of props.controlCardColumns) {
      if (iterator.type === 'muti_select' || iterator.type === 'picture') {
        // 多选\图片
        data[iterator.key] = Array.isArray(iterator.form_value) ? iterator.form_value : [iterator.form_value]
      } else {
        data[iterator.key] = iterator.form_value
      }
    }
    return data
  })


  // console.log(formDataModel)
  const isSubmit = ref<boolean>(false)
  const setState = (val: boolean = false) => {
    isSubmit.value = val
  }
  provide('formDataModel', formDataModel)
  provide('setState', setState)
  defineExpose({
    setState
  })
</script>

<style lang="scss" scoped>
  @mixin card {
    box-sizing: border-box;
    width: 414px;
    background-color: #ffffff;
    box-shadow: 0px 12px 48px 16px rgba(0, 0, 0, 0.03);
  }
  .previre-form {
    @include card;
    padding-bottom: 60px;
  }

  .control_tip {
    text-align: center;
    margin-bottom: 16px;
    color: #969696;
    font-size: 12px;
  }
  .preview-phone {
    @include card;
    border-radius: 20px;
    margin: 0 auto;
    text-align: center;
    padding: 60px 0 120px;
    img {
      width: 280px;
      height: 280px;
    }
    .submit_tip {
      margin-bottom: 20px;
      color: #666;
      > i {
        vertical-align: bottom;
        margin-right: 4px;
      }
    }
    .tip {
      margin-top: 12px;
      font-size: 14px;
      color: #ccc;
    }
  }
  .stat_previre-form {
    position: relative;
  }
</style>
